<template>
	<view class="recruitC">
		<view style="height: 30rpx"></view>
		
		<y-input ref="child" text="招聘岗位" :inputVal="jobTitle" @change="change" type="title"></y-input>
		<u-line></u-line>
		<view class="bet" style="padding: 40rpx 0" @click="gangweishow=true">
			<view class="z-text">类别</view>
			<view class="bet" style="color: #8e8e93; font-size: 24rpx">
				{{ gangwei_name == "" ? "请选择" : gangwei_name }}
				<u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
			</view>
		</view>
		<u-line></u-line>
		<view v-for="(item, index) in selectList" :key="index">
			<view class="bet" style="padding: 40rpx 0" @click="openModal(item)">
				<view class="z-text">{{ item.name }}</view>
				<view class="bet" style="color: #8e8e93; font-size: 24rpx">
					{{ item.value == "" ? "请选择" : item.value }}
					<u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
				</view>
			</view>
			<u-line></u-line>
		</view>
		<view>
			<view class="bet" style="padding: 40rpx 0">
				<view class="z-text">年龄段</view>
				<view class="flexbetween">
					<input type="number" class="textcenter" style="color: #333; font-size: 24rpx;width: 100rpx;"
						placeholder="1" v-model="start_age" />
					<view class="xiaohei strongtext">至</view>
					<input type="number" class="textcenter" style="color: #333; font-size: 24rpx;width: 100rpx;"
						placeholder="100" v-model="end_age" />
				</view>
			</view>
			<u-line></u-line>
		</view>
		<view>
			<view class="bet" style="padding: 40rpx 0" @click="chooseStatus()">
				<view class="z-text">发布状态</view>
				<view class="bet" style="color: #8e8e93; font-size: 24rpx">
					{{ status_text}}
					<u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
				</view>
			</view>
			<u-line></u-line>
		</view>

		<view class="bet" style="padding: 30rpx 0" @click="shows = true">
			<view class="z-text">所在地址</view>
			<view class="bet" style="color: #8e8e93; font-size: 24rpx">
				{{
				address == ""
				  ? "请选择"
				  : address
			  }}
				<u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
			</view>
		</view>
		<u-line></u-line>
		<view class="bet" style="padding: 30rpx 0" @click="open()">
			<view class="z-text">职位福利</view>

			<view class="bet" style="color: #8e8e93; font-size: 24rpx">
				<text v-if="selectbqtext==''">请选择</text>
				<text v-else>{{selectbqtext}}</text>
				<u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
			</view>
		</view>
		<u-line></u-line>
		<view>
			<view class="bet" style="padding: 40rpx 0">
				<view class="z-text">内容：</view>
				<view class="bet" style="color: #8e8e93; font-size: 24rpx">
					<view class="uni-textarea" style="border: 3rpx solid #000; border-radius: 25rpx;">
						<textarea style="width: 550rpx; max-height: 200rpx; padding: 15rpx;" v-model="detail"
							placeholder="请输入内容" maxlength=800 auto-focus=true />
					</view>
					<u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
				</view>
			</view>
			<u-line></u-line>
		</view>
		<view>
			<view class="bet" style="padding: 40rpx 0">
				<view class="z-text">姓名</view>
				<input type="text" class="textright" style="color: #333; font-size: 24rpx" placeholder="请输入姓名"
					v-model="username" />
			</view>
			<u-line></u-line>
		</view>
		<view class="z-text margin_top4">图片</view>
		<view class="flexleft flex_wrap">
			<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
				<!-- 已上传 -->
				<view class="listleftimg">
					<image class="listleftimg radius" :src="item" mode=""></image>
					<view class="shanchu" @click="delindex(index,images,images_text)"></view>
				</view>
			</view>
			<view class="itemimgBox flexcenter margin_top2" v-if="images_text.length<1"
				@click="uploadImg(1,images,images_text)">
				<!-- 未上传 -->
				<view class="huibox listleftimg"></view>
			</view>
		</view>
		<view class="btnC">
			<!-- <button size="mini" type="warn">重置</button> -->
			<button size="mini" type="primary" @tap="submint" v-if="!listid">发布</button>
			<button size="mini" type="primary" @tap="submint" v-if="listid">确定</button>
		</view>
		<!-- <u-popup :show="showPop" mode="bottom" @close="close">
			<checkbox-group @change="checkboxChange" class="uPop">
				<label class="uni-list-cell uni-list-cell-pd uniCustom" v-for="(item , index) in welfareList"
					:key="index">
					<view style="margin-right: 35rpx;">{{item.name}}</view>
					<view>
						<checkbox :value="item.id.toString()" :checked="item.checked" />
					</view>
				</label>
			</checkbox-group>
		</u-popup> -->
		<u-popup :show="showPop" @close="showPop=false">
			<view class="mainpadding ">
				<view class="mainpadding2 textcenter xiaohei main_size" style="padding-bottom: 0;">职位福利</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?'lvbtn margin_right margin_top1':'huibtn margin_right margin_top1'"
						v-for="(item , index) in welfareList"
							:key="index" @click="checkssbq(item)">{{item.name}}</view>
				</view>
				<view class="margin_top submitbtn" @click="ssbqListfn()">确定</view>
			</view>
		</u-popup>
		<u-popup :show="showPop1" mode="bottom" @close="close">
			<checkbox-group @change="statusChange" class="uPop">
				<label class="uni-list-cell uni-list-cell-pd uniCustom" v-for="(item , index) in statusdata"
					:key="index">
					<view style="margin-right: 35rpx;">{{item.value}}</view>
					<view>
						<checkbox :value="item.id.toString()" :checked="item.checked" />
					</view>
				</label>
			</checkbox-group>
		</u-popup>
		<u-picker :show="show" :columns="columns" @confirm="select" @cancel="show = false" keyName="name"></u-picker>
		<u-picker :show="shows" ref="uPicker" :columns="columns1" @confirm="confirm" @cancel="shows = false"
			@change="changeHandler"></u-picker>
		<u-picker :show="gangweishow" keyName="name" :columns="gangweicolumns" @confirm="gangweiconfirm"
			@cancel="gangweishow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import yInput from "@/components/y-input/index";
	export default {
		name: "recruit",
		components: {
			yInput,
		},
		data() {
			return {
				username: "",
				start_age: "",
				end_age: "",
				gangwei_name: "",
				gangwei_id: "",
				gangweishow: false,
				gangweicolumns: [],
				status: 0,
				status_text: '未发布',
				statusdata: [{
					id: 0,
					value: '未发布',
					checked: true


				}, {
					id: 1,
					value: '发布',
					checked: false
				}, ],
				wage: {
					value: "",
					id: ""
				}, //薪资范围
				education: {
					value: "",
					id: ""
				}, //学历
				experience: {
					value: "",
					id: ""
				}, //经验要求
				company: {
					value: "",
					id: ""
				}, //公司
				linkman: {
					value: "",
					id: ""
				}, //联系人、聘用方式
				welfare: [], //工作岗位福利，
				jobTitle: "", //职位名称
				detail: "", //职位描述
				status: 0, //状态--未发布，已发布
				address: "", //地址
				selectList: [{
						name: "工作经验",
						key: "workexperienceList",
						value: ""
					},
					{
						name: "学历",
						key: "educationList",
						value: ""
					},
					{
						name: "薪资范围",
						key: "xinzirangeList",
						value: ""
					},
					{
						name: "公司",
						key: "gongsilabelList",
						value: ""
					}
				],
				welfareList: [], //福利标签,选择列表
				showWelfareText: [], //用于展示的福利标签
				columnList: {},
				show: false,
				shows: false,
				columns: [],
				columns1: [],
				listid: "",
				showPop: false,
				showPop1: false,
				images: [],
				images_text: [],
				provinces: "",
				citys: "",
				qus: "",
				selectbqtext:""

			}
		},
		async onLoad(options) {
			if (options.id) {
				this.listid = options.id
				this.getDetail()
				uni.setNavigationBarTitle({
					title: "编辑招聘岗位"
				})
			}
			this.columnList = await this.getfromInfo();
			let welfareList = (await this.getfromInfo()).fulilabelList;
			welfareList.forEach(item => {
				this.$set(item, "ischeck", false)
			})
			this.welfareList = welfareList
			this.getAreaList();
			this.getleibie();
		},
		methods: {
			gangweiconfirm(e) {
				this.gangwei_id = e.value[0].id
				this.gangwei_name = e.value[0].name
				this.gangweishow = false
			},
			getleibie() {
				this.http.get("index/gangwei", {}).then((res) => {
					this.gangweicolumns.push(res.data)
				});
			},
			getDetail() {
				let url = '/api/recruit/detail'
				httpRequest.request(url, 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					let data = res.data

					this.status = data.status;

					if (this.status == 0) {
						this.status_text = '未发布';
						this.statusdata = [{
							id: 0,
							value: '未发布',
							checked: true


						}, {
							id: 1,
							value: '发布',
							checked: false
						}, ];
					} else {
						this.status_text = '发布';
						this.statusdata = [{
							id: 0,
							value: '未发布',
							checked: false


						}, {
							id: 1,
							value: '发布',
							checked: true
						}, ];
					}

					this.gangwei_name = data.gangwei.name
					this.gangwei_id = data.gangwei.id
					this.username = data.username
					this.start_age = data.start_age
					this.end_age = data.end_age
					this.jobTitle = data.name
					this.address = data.address
					this.detail = data.content
					this.company = {
						value: data.company.name,
						id: data.company.id
					}
					this.wage = {
						value: data.xinzirange.name,
						id: data.xinzirange.id
					} //薪资范围
					this.education = {
						value: data.education.name,
						id: data.education.id
					} //学历
					this.experience = {
						value: data.workexperience.name,
						id: data.workexperience.id
					} //经验要求
					this.linkman = {
						value: data.pintype.name,
						id: data.pintype.id
					} //联系人、聘用方式
					this.welfare = data.fulilabel_ids.split(',')
					this.selectList[0].value = data.workexperience.name
					this.selectList[1].value = data.education.name
					this.selectList[2].value = data.xinzirange.name
					this.selectList[3].value = data.company.name
					if(data.pintype.name){
						this.selectList[4].value = data.pintype.name
					}
					let showWelfareText = []
					data.fulilabels.forEach((item, index) => {
						showWelfareText.push(item.name)
					})
					this.selectbqtext = showWelfareText.join()
					this.gangwei_id = data.gangwei.id
					this.gangwei_name = data.gangwei.name
					this.images = data.images.split(",")
					this.images_text = data.images_text
				})
			},
			submint() {
				if (this.username == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				if (this.start_age == "" || this.end_age == "") {
					httpRequest.toast("请将年龄段填写完整")
					return false
				}
				let data = {
					username: this.username,
					start_age: this.start_age,
					end_age: this.end_age,
					name: this.jobTitle, //职位名称
					address: this.address, //地址
					xinzirange_id: this.wage.id, //薪资范围id
					education_id: this.education.id, //教育程度id
					workexperience_id: this.experience.id, //工作经验年限id
					fulilabel_ids: this.welfare, //福利待遇id数组
					status: 1, //是否发布
					company_id: this.company.id, //公司id
					pintype_id: this.linkman.id, //聘用方式id
					content: this.detail,
					status: this.status,
					gangwei_id: this.gangwei_id,
					images: this.images.join(),
					province: this.provinces,
					city: this.citys,
					qu: this.qus,
				};
				console.log(data);

				let url = 'recruit/addrecruit'
				if (this.listid) {
					this.$set(data, "id", this.listid)
					url = '/recruit/editrecruit'
				}
				this.http.post(url, data)
					.then((res) => {
						if (res.code != 1) {
							this.toast(res.msg);
							return
						}
						if (this.listid) {
							this.toast("编辑成功");
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000);
						} else {
							this.toast("发布成功");
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/tabbar/tab-4"
								})
							}, 1000);
						}
					})
					.catch((err) => {
						this.toast("发布失败");
						console.log(err);
					})
			}, //submit
			chooseStatus() {
				this.showPop1 = true;
			},
			checkssbq(item) {
				item.ischeck = !item.ischeck
			},
			ssbqListfn() {
				this.showPop = false
				let arr = []
				let arr2 = []
				this.welfareList.forEach(item => {
					if (item.ischeck) {
						arr.push(item.name)
						arr2.push(item.id)
					}
				})
				this.welfare = arr2
				this.selectbqtext = arr.length ? arr.join() : ""
			},
			statusChange() {
				let _this = this;
				var statusdata = this.statusdata;
				var newData = [];
				this.statusdata.forEach(ele => {
					var item = {};
					if (ele.checked === false) {
						item = {
							id: ele.id,
							value: ele.value,
							checked: true,
						};
						_this.status = ele.id;
						_this.status_text = ele.value;
					} else {
						item = {
							id: ele.id,
							value: ele.value,
							checked: false,
						};
					}


					newData.push(item)
				});

				this.statusdata = newData;
			},
			open() {
				this.showPop = true;
			},
			close() {
				this.showPop = false;
				this.showPop1 = false;
			},
			checkboxChange(e) {
				this.welfare = e.detail.value;
				let names = [];
				this.welfare.forEach(ele => {
					let res = this.welfareList.filter((item) => {
						if (item.id == ele) {
							return item;
						}
					});
					names.push(res)
				});
				this.showWelfareText = names;
			},

			async getAreaList() {
				const province = [];
				const city = [];
				const county = [];
				const a = await this.http.get("index/area"); // a.data
				this.areaList = a.data;
				a.data.map((item) => {
					province.push(item.name);
				});
				a.data[0].children.map((item) => {
					city.push(item.name);
				});
				a.data[0].children[0].children.map((item) => {
					county.push(item.name);
				});
				this.columns1 = [province, city, county];
				console.log(this.columns1, "columns1");
			},
			select(e) {
				if (this.selects.key == "workexperienceList") {
					//工作经验
					console.log("工作经验");
					this.selectList.forEach((ele) => {
						if (ele.key == "workexperienceList") {
							ele.value = e.value[0].name;
						}
					});

					this.experience.value = e.value[0].name;
					this.experience.id = e.value[0].id;
				}

				if (this.selects.key == "educationList") {
					//学历
					console.log("学历");
					this.selectList.forEach((ele) => {
						if (ele.key == "educationList") {
							ele.value = e.value[0].name;
						}
					});
					this.education.value = e.value[0].name;
					this.education.id = e.value[0].id;
				}

				if (this.selects.key == "xinzirangeList") {
					//薪资
					console.log("薪资");
					this.selectList.forEach((ele) => {
						if (ele.key == "xinzirangeList") {
							ele.value = e.value[0].name;
						}
					});
					this.wage.value = e.value[0].name;
					this.wage.id = e.value[0].id;
				}

				if (this.selects.key == "gongsilabelList") {
					//公司id
					console.log("公司");
					this.selectList.forEach((ele) => {
						if (ele.key == "gongsilabelList") {
							ele.value = e.value[0].name;
						}
					});
					this.company.value = e.value[0].name;
					this.company.id = e.value[0].id
				}
				this.show = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker,
				} = e;
				console.log(e, "eeeee=....");
				console.log(indexs, "indexs");
				const city = [];
				const county = [];
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.areaList[indexs[0]].children.map((item) => {
						city.push(item.name);
					});
					this.areaList[indexs[0]].children[indexs[1]].children.map((item) => {
						county.push(item.name);
					});
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, city);
					picker.setColumnValues(2, county);
				} else if (columnIndex === 1) {
					this.areaList[indexs[0]].children[indexs[1]].children.map((item) => {
						county.push(item.name);
					});
					picker.setColumnValues(2, county);
				}
			},
			confirm(e) {
				this.provinces = this.areaList[e.indexs[0]].id
				this.citys = this.areaList[e.indexs[0]].children[e.indexs[1]].id
				this.qus = this.areaList[e.indexs[0]].children[e.indexs[1]].children[e.indexs[2]].id
				this.address = e.value.join('/');
				console.log(this.provinces, this.citys, this.qus);
				this.shows = false;
			},
			change(e) {
				//获取组件信息
				this.jobTitle = e.val;
			},

			openModal(item) {
				this.selects = item;
				this.columns = [];
				const list = [];
				this.columnList[item.key].map((item) => {
					list.push({
						name: item.name,
						id: item.id
					});
				});
				this.columns.push(list);
				console.log(this.columns, "this.columns");
				this.show = true;
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},


		}
	}
</script>

<style lang="scss">
	::v-deep.uni-checkbox-input-checked {
		background-color: #007aff !important;
	}

	.huibox {
		width: 147rpx;
		height: 147rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		background-size: 100% 100%;
		background-image: url('@/static/upimg.png');
	}

	.recruitC {
		width: 100%;
		box-sizing: border-box;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.listleftimg {
		width: 140rpx;
		height: 140rpx;
		min-width: 140rpx;
		position: relative;
	}

	.shanchu {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
		background-size: 100% 100%;
		background-image: url('@/static/shanchu1.png');
	}

	.btnC {
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		padding-top: 80rpx;
		padding-bottom: 50rpx;
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	.uniCustom {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		padding-top: 35rpx;
		padding-bottom: 35rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		border-bottom: 3rpx solid #ccc;
		font-weight: 700;
		font-size: 35rpx;
	}

	.uPop {
		box-sizing: border-box;
		height: 650rpx;
		overflow-y: scroll;
	}

	.itemimgBox {
		width: 25%;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	.lvbtn {
		background: #DFFFED;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 10rpx 15rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #fff;
		background-color: #c1282e;
	}

	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 10rpx 15rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}
</style>